<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ghost Floating</title>
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" href="./youling0.png" type="image/x-icon">
</head>

<body>
    <div class="video-container">
        <!-- 背景和音效自动循环播放 -->
        <video autoplay muted loop>
            <source src="./bgvideo1.mp4" type="">
            Your browser does not support the video tag.
        </video>
        <audio autoplay loop>
            <source src="./首页音效2_01.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <!-- 页面显示（覆盖在背景视频上） -->
        <div class="overlay">
            <div class="titlee">
                <!-- <h1>我的游戏</h1> -->
                <img src="./biaotil.png" alt="" class="titleti">
            </div>
            <a href="../瑜/跑酷.html">
                <button class="kaishi">START GAME</button>
            </a>
            <div class="introduce">
                键位介绍：<span>W</span>上移 <span>S</span>下移(英文输入)
            </div>

            
                <!-- 添加按钮，弹出窗口   -->
                <button id="icon-btn1" class="icon-button1">
                    <img src="./问号3.png" alt="" title="游戏介绍" style="width: 11%;" class="icon1">
                </button>

                <div id="myModal" class="modal">
                    <!-- 弹窗的内容 -->
                    <div class="modal-content">
                        <!-- 弹窗标题 -->
                        <h2 class="modal-title">游戏介绍</h2>
                        <!-- 弹窗关闭按钮 -->
                        <span class="close">&times;</span>
                        <!-- 弹窗内容 -->
                        <div class="modal-body">
                            <p>通过移动躲避障碍物，20s内没消耗完三条命，则通关成功。<br><span class="other-introduce">名字 以夜晚作为整体风格，幽灵为角色，整体风格色调统一</span></p>
                        </div>
                    </div>
                </div>


                <a href="./group.html" target="_blank">
                    <img src="./小组3.png" alt="" title="小组介绍" style="width: 11%;" class="icon3">
                </a>
                <a href="https://gitee.com/lhuilan/second-group-task" target="_blank">
                    <img src="./仓库2.png" alt="" title="代码仓库" style="width: 11%;" class="icon5">
                </a>
            </i>
            <a href="https://www.bilibili.com/video/BV1xm421V7sn/?spm_id_from=333.999.0.0&vd_source=b3bdb53cc39b91f8cdc60bbcf7328ce6">
                <img src="./视频3.png" alt="" title="讲解视频" style="width: 11%;" class="icon4">
            </a>
            <script src="./index.js"></script>
</body>

</html>